/*
 * 首页推荐
 * @Author: along
 * @Date: 2019-12-17 10:24:00
 */
<template>
    <div class="container companyList">
        <!-- header -->
        <div class="header">
            <div class="header-box">
                <p class="header-box-title">展示形式:</p>
                <el-select
                    v-model="header.type"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-box-title">类目类型:</p>
                <el-select
                    v-model="header.category"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in categoryList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-box-title">类目名称搜索:</p>
                <el-input
                    v-model="header.name"
                    placeholder="请输入类目名称"
                    suffix-icon="el-icon-search"
                    size="small"
                    clearable
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            border
            ref="companyList"
            @sort-change="handleSortChanged"
        >
            <el-table-column
                type="index"
                width="80"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="type_name"
                label="类目名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="recommend_sort"
                label="排序"
                sortable
            >
                <template slot-scope="scope">
                    <div class="sort-wrap">
                        {{ scope.row.recommend_sort }}
                        <span class="sort-spliter" />
                        <el-button
                            type="text"
                            class="btn-sort"
                            @click="fnEditSort(scope.row)"
                        >
                            <i class="el-icon-edit" />
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="show_style"
                label="展示形式"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.show_style == 1">竖版样式</span>
                    <span v-if="scope.row.show_style == 2">横滑样式</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="recommend_type"
                label="类目类型"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.recommend_type == 1">一级类目</span>
                    <span v-if="scope.row.recommend_type == 2">二级类目</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="recommend_status"
                label="状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.recommend_status == 1">正常显示</span>
                    <span v-if="scope.row.recommend_status == 0">不显示</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="course_num"
                label="视频数量"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <span
                        class="cursor-font"
                        @click="fnGoVideo(scope.row)"
                    >{{ scope.row.course_num }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="移入首页时间"
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.create_time">{{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="180px"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        class="curse-add"
                        @click="fnEdiyStyle(scope.row)"
                    >
                        编辑样式
                    </el-button>
                    <el-button
                        type="text"
                        class="curse-add"
                        @click="fnDelete(scope.row)"
                    >
                        从首页移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- 推荐到首页 -->
        <el-dialog
            title="推荐到首页"
            :visible.sync="dialogVisibleHome"
            width="510px"
            :close-on-click-modal="false"
        >
            <div style="display:flex">
                <p style="marginRight: 15px">展示样式</p>
                <el-radio-group
                    v-model="category_style"
                >
                    <el-radio
                        :label="1">竖版</el-radio>
                    <el-radio
                        :label="2">横滑</el-radio>
                </el-radio-group>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="dialogVisibleHome = false"
                    size="small"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnConfirmHome()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 推荐到首页 -->
    </div>
</template>

<script>
export default {
    /**
     * @param  {Object}    authResult           //表单权限
     * @param  {Array}     tableData            //表单数据
     * @param  {Object}    page                 //表单分页
     * @param  {Object}    header               //表单检索字段
     * @param  {Array}     companyList          //表单检索字段
     * @param  {Array}     typeList             //表单展示形式
     * @param  {Array}     categoryList         //表单类目类型
     * @param  {String}    pathName             //上一页路由name
     * @param  {Boolean}   dialogVisibleHome    //弹窗开关
     * @param  {string}    category_style       //排列样式
     * @param  {string}    id                   //记录id-用于设置样式
     */
    data () {
        return {
            id: '',
            category_style: 1,
            dialogVisibleHome: false,
            pathName: '',
            categoryList: [{
                value: '',
                label: '全部'
            },{
                value: 1,
                label: '一级类目'
            },{
                value: 2,
                label: '二级类目'
            }],
            typeList: [{
                value: '',
                label: '全部'
            },{
                value: 1,
                label: '竖版样式'
            },{
                value: 2,
                label: '横滑样式'
            }],
            header: {
                type: '',
                category: '',
                name: ''
            },
            filterData: {
                sort_field: 0,
                sort_type: 0
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            authResult: {},
            time: 0
        };
    },
    filters: {},
    computed: {},
    watch: {},
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.pathName = from.name;
        });
    },
    mounted () {
        this.authResult = this.$route.meta.authResult;
        this.fnRecord();
        this.fnBreadcrumb();
        this.getTableData();

        this.tableData = [{
            recommend_sort: 99,
            course_num: 10,
            type_no: 'sdsss',
            show_style: 2,
            create_time: 1576631063,
            type_name: '我是分类名称',
            recommend_status: 0,
            id: 1,
            recommend_type: 1
        }];
    },
    destroyed(){
        window.removeEventListener('popstate', this.fnGoBack, false);
    },
    methods: {
        /**
         * 设置表单header
         */
        fnBreadcrumb () {
            this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '学习'},{title: "首页推荐"}]);
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/course_recommend%5Cget_list', {
                show_style: this.header.type,
                recommend_type: this.header.category,
                keyword: this.header.name
            }, resp => {
                if (resp.code == 1) {
                    this.fnSortTable(resp.data.list);
                }
            });
        },

        /**
         * sort排序
         */
        fnSortTable (arr) {
            let list = JSON.parse(JSON.stringify(arr));

            list.sort((a,b)=>{
                return b.create_time - a.create_time;
            });

            this.tableData = list;
        },

        /**
         * 记录上一页路由,监听页面返回并重定向
         */
        fnRecord () {
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.fnGoBack, false);
            }
        },

        /**
         * 上一页重定向
         */
        fnGoBack  () {
            this.$router.replace({ name: this.pathName });
        },

        /**
         *  修改排序
         */
        fnEditSort(row) {
            this.$prompt('修改排序', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(0|\+?[1-9][0-9]*)$/,
                inputPlaceholder: '请输入序号',
                inputErrorMessage: '请输入正整数',
                closeOnClickModal: false,
            }).then(({ value }) => {
                this.$post('/student/course_recommend%5Cmodify', {
                    id: row.id,
                    recommend_sort: value
                }, resp => {
                    if (resp.code == 1) {
                        this.$set(row, 'recommend_sort', value);
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 编辑样式
         */
        fnEdiyStyle (row) {
            this.id = row.id;
            this.category_style = row.show_style;
            setTimeout(()=>{
                this.dialogVisibleHome = !this.dialogVisibleHome;
            },100);
        },

        /**
         * 确定编辑样式
         */
        fnConfirmHome () {
            let self_time = new Date().getTime();

            if (self_time - this.time > 3000) {
                this.time = self_time;
                this.$post('/student/course_recommend%5Cmodify', {
                    id: this.id,
                    show_style: this.category_style
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.dialogVisibleHome = !this.dialogVisibleHome;
                        this.$message({
                            type: 'success',
                            message: '编辑成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            } else {
                return;
            }
        },

        /**
         * 删除
         */
        fnDelete (row) {
            this.$confirm('确认从首页中移除该类目？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/course_recommend%5Cdelete',{
                    id: row.id
                },resp=>{
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 跳转视频列表
         */
        fnGoVideo (row) {
            if (row.recommend_type == 1) {
                this.$router.replace({
                    name: 'StudyList',
                    query: {
                        type_no: row.type_no
                    }
                });
            } else if (row.recommend_type == 2) {
                this.$router.replace({
                    name: 'StudyList',
                    query: {
                        sub_type_no: row.type_no
                    }
                });
            }
        },

        /**
         * 排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 'asc',
                descending: 'desc'
            };

            let sortFieldMap = {
                recommend_sort: 'recommend_sort',
            };

            if (sortTypeMap[data.order] == 'asc' && sortFieldMap[data.prop] == 'recommend_sort') {
                this.sortTableDate('min', sortFieldMap[data.prop]);
            } else if (sortTypeMap[data.order] == 'desc' && sortFieldMap[data.prop] == 'recommend_sort') {
                this.sortTableDate('max', sortFieldMap[data.prop]);
            }

            this.getTableData();
        },

        /**
         * 排序函数
         * @param   {String}    param   //max:升序  min:降序
         */
        sortTableDate (param,field) {
            let data = JSON.parse(JSON.stringify(this.tableData));

            if (param == 'max') {
                data.sort((a,b)=>{
                    return a.field - b.field;
                });
                this.tableData = data;
            } else if (param == 'min') {
                data.sort((a,b)=>{
                    return b.field - a.field;
                });
                this.tableData = data;
            } else {
                return;
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 10px 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .header {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .header-box {
                display: flex;
                margin-right: 15px;
                align-items: center;
                color: #606266;
                margin-bottom: 10px;
                &-title {
                    margin-right: 2px;
                    white-space: nowrap;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .companyList .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .companyList .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .companyList .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .companyList .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
</style>